<template>
  <div>
    <p>{{ nowDate }}~{{ nowWeek }}</p>
    <p>{{ nowTime }}</p>
    <p></p>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  name: "NowTime",
  setup() {
    const nowDate = ref("");
    const nowWeek = ref("");
    const nowTime = ref("");

    const dealWithTime = (data: Date) => {
      let Y = data.getFullYear();
      let M = data.getMonth() + 1;
      let D = data.getDate();
      let H = data.getHours();
      let Min = data.getMinutes();
      let S = data.getSeconds();
      let W = data.getDay();
      H = H < 10 ? "0" + H : H;
      Min = Min < 10 ? "0" + Min : Min;
      S = S < 10 ? "0" + S : S;
      switch (W) {
          case 0:
              W = "日";
              break;
          case 1:
              W = "一";
              break;
          case 2:
              W = "二";
              break;
          case 3:
              W = "三";
              break;
          case 4:
              W = "四";
              break;
          case 5:
              W = "五";
              break;
          case 6:
              W = "六";
              break;
          default:
              break;
      }
      nowDate.value = Y + "年" + M + "月" + D + "日";
      nowWeek.value = "周" + W;
      nowTime.value = H + ":" + Min + ":" + S;
    }

    onMounted(() => {
      dealWithTime(new Date());
      setInterval(() => {
        dealWithTime(new Date())
      }, 1000);
    });

    return {
      nowDate,
      nowWeek,
      nowTime,
    };
  }
});
</script>
<style scoped>
	p:nth-child(2){
		font-size: 30px;
		font-weight: 400;
		margin-top: 20px;
	}
</style>